<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>红包</el-breadcrumb-item>
        <el-breadcrumb-item>红包明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item prop="promotionId" label="红包ID：" label-width="80px">
            <el-input clearable v-model="filters.promotionId" placeholder="红包ID"></el-input>
          </el-form-item>
          <el-form-item prop="promName" label="红包名称：">
            <el-input clearable v-model="filters.promName" placeholder="红包名称"></el-input>
          </el-form-item>
          <el-form-item prop="useMobile" label="绑定手机号：">
            <el-input clearable v-model="filters.useMobile" placeholder="绑定手机号"></el-input>
          </el-form-item>
          <el-row class="times">
            <el-form-item label="绑券时间：" prop="createStartTime">
              <el-date-picker
                v-model="filters.createStartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="createEndTime">
              <el-date-picker
                  v-model="filters.createEndTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="结束时间"
                  class="input_postion"
                  clearable
                  @change="changeEndDate"
                  :picker-options="endDateDisabled"
                ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row class="times">
            <el-form-item label="有效时间：" prop="useStartTime">
              <el-date-picker
                v-model="filters.useStartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion"
                clearable
                @change="changeUseStartDate"
                :picker-options="useStartDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="useEndTime">
              <el-date-picker
                  v-model="filters.useEndTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="结束时间"
                  class="input_postion"
                  clearable
                  @change="changeUseEndDate"
                  :picker-options="useEndDateDisabled"
                ></el-date-picker>
            </el-form-item>
          </el-row>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button 
              :label="$t('action.reset')"
              class="resetButton"
              icon="el-icon-refresh"
              @click="resetForm('filters')"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="el-icon-search" label="搜索" @click="getPromotionList()" class="searchButton" />
          </el-form-item>
          
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        ></el-tab-pane>

        <!-- tab表格 -->
        <el-table
          :data="tableData"
          :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
          :highlight-current-row="true"
          :max-height="1500"
          :size="size"
          v-loading="loading"
          :align="align"
          
        >
          <el-table-column align="center" prop="promotionId" label="红包ID" width="300"></el-table-column>
          <el-table-column align="center" prop="promName" label="红包名称" width="240"></el-table-column>
          <el-table-column align="center" label="使用条件" width="240">
            <template slot-scope="scope">
              <span>满{{scope.row.useTotalAmountLimit}}元可用</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="couponAmount" label="红包面值" width="240"></el-table-column>
          <el-table-column align="center" prop="orderId" label="订单编号" width="240"></el-table-column>
          <el-table-column align="center" prop="useMobile" label="绑定手机号" width="240"></el-table-column>
          <el-table-column align="center" label="有效时间" width="300">
            <template slot-scope="scope">
              <span
                v-if="scope.row.couponUseStartTime != null && scope.row.couponUseEndTime != null"
              >{{scope.row.couponUseStartTime}}至{{scope.row.couponUseEndTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">已发行</span>
              <span v-else-if="scope.row.status == 1">可使用</span>
              <span v-else-if="scope.row.status == 2">已使用</span>
              <span v-else-if="scope.row.status == 1 && scope.row.endTime.getTime() < new Date().getTime()">已过期</span>
              <span v-else-if="scope.row.status == 4">已作废</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="绑券日期" width="240"></el-table-column>
          <el-table-column align="left" fixed="right" label="操作" width="330">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="mini"
                style
                :disabled="scope.status == 1 && scope.row.endTime.getTime() >= new Date().getTime() ? true : false "
              >作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            class="t_r"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNumber"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100 ,300 , 500]"
            :total="total"
          ></el-pagination>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  front_prom_types,
  chanel_codes,
  prom_types
} from "@/market/dict/marketDict";
import KtButton from "@/views/Core/KtButton";
import { formatDate } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import { channelCodeConverter } from "@/market/dict/marketDict";

export default {
  name: "Tab",
  components: {
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      align: "center",
      tableData: [],
      flag: false,
      form: {
        region: ""
      },
      option1: 1,
      option1: 2,
      option1: 3,
      tabMapOptions: [
        { label: "全部", key: "99" },
        { label: "已发行", key: "0" },
        { label: "可使用", key: "1" },
        { label: "已使用", key: "2" },
        { label: "已过期", key: "3" },
        { label: "已作废", key: "4" }
      ],
      activeName: "99",
      createdTimes: 0,
      size: "small",
      filters: {
        promName: null,
        id: "",
        promType: 12,
        channelCode: "",
        activityType: "",
        merchantId: null,
        creator: "",
        startTime: "",
        endTime: "",
        operatorStoreId: null,
        type: "",
        status: null,
        createTime: "",
        useTime: "",
        "createStartTime": "",
        "useStartTime":"",
        "createEndTime":"",
        "useEndTime":""
      },
      activityTypes: [
        { activityType: "", label: "请选择" },
        { activityType: "0", label: "自建" },
        { activityType: "1", label: "报名" }
      ],
      merchantIds: [{ merchantId: null, label: "请选择" }],
      storeIds: [{ storeId: null, label: "请选择" }],
      joinCheck: [],
      joinList: ["已使用用户", "未使用用户"],
      wayCheck: [],
      wayList: ["短信", "小程序", "网站", "H5", "邮件"],
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      useStartDateDisabled: {},//开始时间限制
      useEndDateDisabled: {},//结束时间限制
    };
  },
  methods: {
    changeUseStartDate: function() {
      var this_ = this;
      this_.useEndDateDisabled = {
        disabledDate: time => {
          if (this_.filters.useStartTime) {
            return time.getTime() <= new Date(this_.filters.useStartTime).getTime();
          }
        }
      };
    },
    changeUseEndDate: function() {
      var this_ = this;
      this_.useStartDateDisabled = {
        disabledDate: time => {
          if (this_.filters.useEndTime) {
            return time.getTime() >= new Date(this_.filters.useEndTime).getTime();
          }
        }
      };
    },
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.createStartTime) {
            return time.getTime() <= new Date(this_.filters.createStartTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.createEndTime) {
            return time.getTime() >= new Date(this_.filters.createEndTime).getTime();
          }
        }
      };
    },
    createChange(e) {
      this.filters.createStartTime = formatDate(e[0], "yyyy-MM-dd hh:mm:ss");
      this.filters.createEndTime = formatDate(e[1], "yyyy-MM-dd hh:mm:ss");
    },
    useChange(e) {
      this.filters.useStartTime = formatDate(e[0], "yyyy-MM-dd hh:mm:ss");
      this.filters.useEndTime = formatDate(e[1], "yyyy-MM-dd hh:mm:ss");
    },
    handleClick(row) {
       
      this.utils.request.couponDeleteCouponDetail(
        { promotionId: row.promotionId },
        res => {
          this.$message({ message: "作废成功", type: "success" });
          this.findPage();
        }
      );
    },
    handleSizeChange(val) {
       
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
       
      this.pageNumber = val;
      this.findPage();
    },
    findPage() {
      let that = this;
      this.loading = true;
      this.filters.start = this.pageNumber;
      this.filters.limit = this.pageSize;
      this.filters.status =
        this.filters.status == "99" ? null : this.filters.status;
      this.utils.request.couponQueryDetail(this.filters, res => {
        that.loading = false;
        if(res.data.rows == null || res.data.rows.length < 1){
          // this.$message({"type":"warning","message":"查询暂无数据"})
        }else{
          that.tableData = res.data.rows;
          that.total = res.data.total;
        }
      });
    },

    genChannelCode: function(code) {
      return channelCodeConverter(code);
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      //需要校验的keys
      let keys = ["promotionId","promName","useMobile","createTime","useTime"]
      //调用校验
      let  boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
      if(!boo){
        return;
      }

      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters.createStartTime = null;
        this.filters.createEndTime = null;
        this.filters.useStartTime = null;
        this.filters.useEndTime = null;
      }
    },
    getPromotionList() {

      this.filters.start = 1;
      this.findPage();
      // this.$refs.child[0].listQuery.pageNo = 1;
      // this.$refs.child[0].getList();
    }
  },
  watch: {
    activeName(val) {
      // this.$router.push(`${this.$route.path}?tab=${val}`);
      this.filters.status = (val == "99" ? "" : val);
      this.findPage();
    }
  },
  created() {
    //获取商家列表
    let this_ = this;
    this.utils.request.queryMerchantList(
      { start: 1, limit: 10000000 },
      function(res) {
        if (res.code == "0000") {
          res.data.rows.forEach(item => {
            let merchant = {};
            merchant.merchantId = item.id;
            merchant.label = item.name;
            this_.merchantIds.push(merchant);
          });
        }
      }
    );
    this.changeMerchant();
    // init the default selected tab
    //this.frontPromTypes = front_prom_types;
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {
    //查询列表
    this.findPage();
  }
};
</script>

<style scoped lang="scss">
.type {
  display: flex;
  align-items: center;
}
.type p {
  text-align: right;
  margin-right: 20px;
  width: 120px;
}

/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
  border-left: 1px solid #9B9DA3 !important;
  &.is-active {
    border-color: #0090FF !important;
  }
}
</style>
